<template>
    <div class="box">
        <div class="my_riqi">
            <span>2021.12.31</span>
        </div>
        <div class="my_top">
            <div class="my_top">
                <div>
                    <span><img src="../../../public/font/duo.svg" alt=""></span>
                </div>
                <div>
                    <span>多云</span>
                </div>
            </div>
            <div @click="my">
                <img src="../../../public/image/headimg/head (1).png" alt="">
            </div>
        </div>
        <div class="my_fontlist">
            <div class="fontbox" @click="add">
                <span class="">+</span>
            </div>
            <div class="fontbox">
                <span class="iconfont icon-chuang"></span>
            </div>
            <div class="fontbox" @click="lamp">
                <span class="iconfont icon-deng"></span>
            </div>
            <div class="fontbox" @click="icebox">
                <span class="iconfont icon-bingxiang"></span>
            </div>
            <div class="fontbox">
                <span class="iconfont icon-linyu"></span>
            </div>
        </div>
        <div>
            <van-swipe :loop="false" :width="230" class="my-swipe" :show-indicators="false">
                <van-swipe-item v-for="item in imgs" @click="room">
                    <img :src="item.img" alt="" class="my-img">
                    <span class="my_zi">{{ item.title }}</span>
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="my_sle">
            <select id="" class="my_select">
                <option value="">快捷设置</option>
                <option value="">客厅</option>
                <option value="">浴室</option>
            </select>
        </div>
        <div class="my_shezhi">
            <van-swipe :loop="false" class="my-swipe" :show-indicators="false">
                <van-swipe-item class="my_item">
                    <div class="my_shezhi1" @click="Living">
                        <div class="my_weidu">
                            <span class="iconfont icon-icontubiao my_weidu"></span>
                        </div>
                        <div class="my_title">
                            <span>客厅温度</span>
                            <p>24℃</p>
                        </div>
                    </div>
                    <div class="my_shezhi2">
                        <div class="my_shui">
                            <span class="iconfont icon-shui my_shui"></span>
                        </div>
                        <div class="my_title">
                            <span>客厅湿度</span>
                            <p>15%</p>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="my_item">
                    <div class="my_shezhi1" @click="showPopup">
                        <div class="my_weidu">
                            <span class="iconfont icon-shezhi my_weidu"></span>
                        </div>
                        <div class="my_title1">
                            <span>房间卡片</span>
                        </div>
                    </div>
                    <div class="my_shezhi2" @click="entrance">
                        <div class="my_shui">
                            <span class="iconfont icon-shouye my_shui"></span>
                        </div>
                        <div class="my_title1">
                            <span>房间入口</span>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="my_item">
                    <div class="my_shezhi1" @click="kongdu">
                        <div class="my_weidu">
                            <span class="iconfont icon-shezhi my_weidu"></span>
                        </div>
                        <div class="my_title1">
                            <span>空调温度</span>
                        </div>
                    </div>
                    <div class="my_shezhi2" @click="Livingroom">
                        <div class="my_shui">
                            <span class="iconfont icon-shouye my_shui"></span>
                        </div>
                        <div class="my_title1">
                            <span>房间</span>
                        </div>
                    </div>
                </van-swipe-item>
                <van-swipe-item class="my_item">
                    <div class="my_shezhi1" @click="Lifedata">
                        <div class="my_weidu">
                            <span class="iconfont icon-shezhi my_weidu"></span>
                        </div>
                        <div class="my_title1">
                            <span>生活数据</span>
                        </div>
                    </div>
                    <div class="my_shezhi2" @click="usage">
                        <div class="my_shui">
                            <span class="iconfont icon-shouye my_shui"></span>
                        </div>
                        <div class="my_title1">
                            <span>流量开发</span>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>

        </div>
    </div>
    <van-popup :overlay="false" :show="show" v-model="show" position="bottom" :style="{ height: '75%' }">
        <HelloAlert></HelloAlert>
    </van-popup>
</template>
<script setup lang="ts">
import { ref, toRefs, reactive } from 'vue';
import HelloAlert from './helloAlert/index.vue'
import router from '../../router';
import { getList } from '../../apis/index';

// import '../../types/index'

const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const Lifedata = () => {
    router.push('./Lifedata')
}



const obj = reactive({
    imgs: [],
    fontlist: []
})


let { imgs }:any = toRefs(obj)



//数据渲染
const getBannerList = async () => {
    let res: any = await getList()
    console.log(res);
    imgs.value = res.data
}

getBannerList()


const room = () => {
    router.push('./room')
}
const my = () => {
    router.push('./My')
}
const entrance = () => {
    router.push('./entrance')
}

const add = () => {
    router.push('./addroom')
}
const Living = () => {
    router.push('./Living')
}
const lamp = () => {
    router.push('./lamp')
}
const kongdu = () => {
    router.push('./Temperature')
}
const Livingroom = () => {
    router.push('./Livingroom')
}
const icebox = () => {
    router.push('./icebox')
}
const usage = () => {
    router.push('./usage')
}
</script>
<style scoped>
.my_top {
    height: 3.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.my_fontlist {
    height: 4.8rem;
    display: flex;
    justify-content: space-around;
    margin-top: 1.5rem;
    /* background-color: aquamarine; */
}

.box {
    padding: 0.8rem;
    background-color: #FFFFFF;
}

.fontbox {
    width: 4.8rem;
    height: 4.8rem;
    background-color: #F6F5FA;
    color: #ABA3CF;
    font-size: 3rem;
    line-height: 5rem;
    text-align: center;
    border-radius: 1.5rem;

}

.fontbox:hover {
    background-color: #7033FF;
    color: white;
}


.my-swipe .van-swipe-item {
    width: 23rem;
    margin-top: 1.5rem;
    color: #fff;
    /* text-align: center; */
}

.my_riqi {
    color: #FDCC41;
    margin-top: 2rem;
}

.my-img {
    width: 206;
    height: 34.5rem;
    position: relative;
}

.my_zi {
    position: absolute;
    right: 8rem;
    bottom: 2rem;
    font-size: 2rem;
}

.my_select {
    border: none;
}

.my_shezhi {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 1rem;
}

.my_shezhi1 {
    width: 46%;
    background-color: #F6F5FA;
    border-radius: 2rem;
    display: flex;
    align-items: center;
}

.my_weidu {
    width: 6rem;
    height: 6rem;
    background-color: #FB8F66;
    border-radius: 2rem;
    text-align: center;
    line-height: 6rem;
    color: white;
}

.my_shezhi2 {
    width: 46%;
    background-color: #F6F5FA;
    border-radius: 2rem;
    display: flex;
    align-items: center;
}

.my_shui {
    width: 6rem;
    height: 6rem;
    color: #352C5D;
    border-radius: 2rem;
    text-align: center;
    line-height: 6rem;
    background-color: #FFFFFF;
}

.my_sle {
    height: 4rem;
    margin-top: 1rem;
}

.my_title {
    color: #352C5D;
    margin-left: 2rem;
    margin-top: 1rem;
}

.my_title1 {
    color: #352C5D;
    margin-left: 2rem;
    line-height: 1rem;
}

.van-overlay {
    background: none;
}

.my_item {
    display: flex;
    justify-content: space-between;
    width: 100vw;
}
</style>